<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      2048
      <ion-icon name="game-controller-a"></ion-icon>
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="start()">
        <ion-icon name="md-refresh"></ion-icon>
      </button>
      <button ion-button icon-only (click)="restore()">
        <ion-icon name="md-undo"></ion-icon>({{historical.length}})
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="main">
  <!--(swipe)="swipeEvent($event)"-->

  <div class="game-over-box" *ngIf="showGameOver">
    <h2>Game Over</h2>
    <h3>score:{{score}}</h3>
      <button ion-button color="warn" block round (click)="showGameOver = !1; start();">重新开始</button>
      <button ion-button color="main" block round (click)="showGameOver = !1">返回</button>
  </div>

  <div class="swipeBox"
       swipe-vertical
       (swipe)="swipeEvent($event)"
       ></div>
  <div class="score-box" >
    <div class="score">
      <p>得分</p>
      <p class="now">{{score}}</p>
    </div>
    <div class="score ">
      <p>最高</p>
      <p class="highest">{{highest}}</p>
    </div>
  </div>


  <div class="items-box">
    <div *ngFor="let item of items"
         [class]="'item item-'+ (item>8192 ? '16384' : item)">
      {{item < 2 ? '' : item}}</div>
  </div>

  <!--<button (click)="up()">上</button>-->
  <!--<button (click)="down()">下</button>-->
  <!--<button (click)="left()">左</button>-->
  <!--<button (click)="right()">右</button>-->

  <div class="tips">
    <h5>合并数字获得2048，或者更高！</h5>
    <p>咋玩：滑动手指控制方向，合并相同数字获得胜利或者失败！</p>
  </div>


</ion-content>
